<template>
  <div class="tpl-wrap">
    <div class="k-header">业务配置</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="模板映射" name="draft"><template-code-config /></el-tab-pane>
      <el-tab-pane label="业务模板" name="template"><template-biz-config /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
/* eslint-disable no-console */
import TemplateCodeConfig from './components/TemplateCodeConfig'
import TemplateBizConfig from './components/TemplateBizConfig'

export default {
  name: 'TemplateMsgConfig',
  components: {
    TemplateCodeConfig,
    TemplateBizConfig
  },
  props: {
    appId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'draft'
    }
  },
  computed: {},
  mounted() {},
  methods: {
    handleClick(tab) {}
  }
}
</script>

<style lang="scss" scoped>
.k-header {
	background-color: #ffffff;
	padding: 30px 20px;
	font-size: 28px;
	color: #333;
}

.tpl-wrap ::v-deep .el-tabs__header {
	margin-bottom: 10px !important;
}

.tpl-wrap ::v-deep .el-tabs__active-bar {
	height: 3px !important;
}

.tpl-wrap ::v-deep .el-tabs__nav-wrap {
	background: #ffffff !important;
	padding: 0 20px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.tpl-wrap ::v-deep .el-tabs__content {
	background: #ffffff !important;
	padding: 20px 20px;
	border-radius: 5px;
	.el-button--primary {
		background-color: $btnBgc;
		border-color: $btnBgc;
	}
	.el-button--primary:hover {
		opacity: 0.5;
	}
}

.info-item {
	margin-bottom: 16px;
	&:last-child {
		margin-bottom: 10px;
	}

	.text {
		line-height: 1.6;
	}

	.label {
		color: #333;
		font-size: 14px;
		line-height: 1.6;
		display: inline-block;
		width: 80px;
	}

	.value {
		color: #999;
		font-size: 16px;
		line-height: 30px;
	}
}
.info-list {
	background: #ffffff;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}
.category-txt {
	margin-right: 5px;
	&:after {
		content: ',';
	}
	&:last-child:after {
		content: '';
	}
}
.list-search {
	margin-bottom: 20px;
	.el-select {
		width: 120px;
	}
	.el-input {
		width: 400px;
		margin-right: 10px;
	}
}

::v-deep .el-tabs__item.is-active {
	color: $btnBgc;
}
::v-deep .el-tabs__item:hover {
	color: $btnBgc;
}
::v-deep .el-tabs__active-bar {
	background-color: $btnBgc;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
	color: white;
	background-color: $btnBgc;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
	color: white;
	background-color: $btnBgc;
}
</style>
